<template>
  <div>
      <h1>dispersed refs：</h1>
      <p>{{result}}</p>
    <!-- <Suspense>
      <template #default>
        <div>
          <h1>成功接受的结果：</h1>
          <p>{{result}}</p>
        </div>
      </template>
    </Suspense> -->

    <!-- 加载异步组件 -->
    <h1>下面演示 Suspense</h1>
    <Suspense>
      <template #default>
        <!-- <async-show /> -->

        <async-dog />
      </template>
      <template #fallback>
        <h1>Loading AsyncShow...</h1>
      </template>
    </Suspense>

    <h1>{{count}}</h1>
    <h1>{{greetings}}</h1>
    <button @click="increase">自增1</button>
    <button @click="updateGreeting">udpateGreeting</button>
    <h2>{{doubled}}</h2>
    <h2>x:{{x}},y:{{y}}</h2>

    <h1 v-if="loading">加载中......</h1>
    <!-- <img v-if="loaded" :src=result.message> -->
    
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    <modal :isOpen="isModalOpen" :msg="modalMsg" @close="closeModal" />
    <button @click="openModal">打开Modal</button>

  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive,toRefs,onMounted,
  onUpdated,onRenderTriggered,watch,onErrorCaptured } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import { ref } from 'vue';
import useMousePosition from './hooks/useMousePosition';
import useURLLoader from './hooks/useURLLoader';
import Modal from './components/Modal.vue';
// import AsyncShow from './components/AsyncShow.vue';
import AsyncDog from './components/AsyncDog.vue';
import useHttpRequest from './hooks/useHttpRequest';
import useHttpRequestDispersed from './hooks/useHttpRequestDispersed';
import useHttpRequestCentralized from './hooks/useHttpRequestCentralized';

interface DataProps {
  count:number,increase:()=> void,doubled:number
}

interface httpRes {
  loading:any,loaded:any,result:any,error:any

}
export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,Modal,
    // AsyncShow,
    AsyncDog
  },
  setup(){
    // 下面定义的 error 和 onErrorCaptured 配合捕获异常
    const asyncError = ref(null);
    onErrorCaptured((e:any)=>{
      asyncError.value = e;
      return true;// 不再向上传播
    })

    // const rawSpec = useURLLoader('https://www.jzy.world/white/rawSpec/all');
    // const rawSpec = useHttpRequest('https://www.jzy.world/white/rawSpec/all');
    // const { loading,loaded,result,error } = useHttpRequestDispersed('https://www.jzy.world/white/rawSpec/all');
    // const { loading:a,loaded:b,result:c,error:d } = useHttpRequestDispersed('https://www.jzy.world/white/rawSpec/all');
    const { loading,loaded,result,error } = useHttpRequestCentralized('https://www.jzy.world/white/rawSpec/all');

    onMounted(()=>{
      console.log('onMounted!!!');
    })

    onUpdated(()=>{
      console.log('onUpdated!!!');
    })

    onRenderTriggered((event)=>{
      console.log('onRenderTriggered!!!');
      console.log(event);
    })

    const greetings = ref('');
    const updateGreeting = ()=>{
      greetings.value +='Hello';
    }

    const {x,y} = useMousePosition();
    // const { loading,loaded,result,error } = useURLLoader('https://dog.ceo/api/breeds/image/random');
    

    const data:DataProps = reactive({
      count:0,
      increase:()=>{ data.count++  },
      doubled:computed(()=>{ return data.count * 2 })
    })

    // 如果将 document.title 赋值的语句拿到 watch 外面当 greetings 变动时
    // 网页的标题是不会变动的，因为赋值语句在 setup 中，而 setup 是只执行一次的
    // 所以要其变动需要放到 watch 中
    // 使用 watch 监控响应式对象 value 的变化
    // 监控的对象可以是数组，注意下面如果直接使用 data.count 是会报错的
    // 因为 data.count 取出来的是 number 类型，要转换为响应式对象才可以
    // 监控的是数组，那么后面的 newValue 一样是数组
    watch([greetings,()=> data.count ],(newValue,oldValue)=>{
      document.title = 'updateed ' + greetings.value
      console.log('newValue:',newValue);
      console.log('oldValue:',oldValue);
    })


    const refData = toRefs(data);
    // return { ...refData,greetings,updateGreeting,x,y };

    // 下面是模态窗相关的属性
    const modalMsg = ref('customer Modal');
    const isModalOpen = ref(false);
    const openModal = () => {
      isModalOpen.value = true;
    }
    const closeModal = () => {
      isModalOpen.value = false;
    }
    return { ...refData,greetings,updateGreeting,...{x,y},
      loading,loaded,result,error,
      // a,b,c,d,
      // rawSpec,
      modalMsg,isModalOpen,openModal,closeModal,
      asyncError };
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
